<script setup lang="ts">
// 导入 useUserStore 函数，用于访问用户信息
import { useUserStore } from '@/store/user'
const { userInfo } = useUserStore()

// 导入 useRouter 函数，用于访问 Vue Router
import { useRouter } from 'vue-router'

// 从 useRouter 函数中获取当前路由器实例
const router = useRouter()

// 定义 goToCreateBlog 函数，用于跳转到创建/编辑博客页面
const goToCreateBlog = () => {
  // 使用 router.push 方法跳转到 create-edit-blog 页面
  router.push('/create-edit-blog')
}

// 定义 goToMyBlogs 函数，用于跳转到我的博客页面
const goToMyBlogs = () => {
  // 使用 router.push 方法跳转到 my-blogs 页面
  router.push('/my-blogs')
}

// 定义 logout 函数，用于执行注销操作
const logout = () => {
  // 在此处添加注销操作的代码
}
</script>
<template>
  <div class="login-link">
    <!-- 判断userInfo.username 如果有则显示nickname,没有则显示登录连接 -->
    <!-- <span v-if="userInfo?.username">{{
      userInfo?.nickname || userInfo.username
    }}</span> -->

    <el-dropdown v-if="userInfo.nickname">
      <span class="el-dropdown-link">
        {{ userInfo.nickname || userInfo.username
        }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="goToCreateBlog">
            <el-icon> <Edit /> </el-icon>创建博客</el-dropdown-item
          >
          <el-dropdown-item @click="goToMyBlogs">
            <el-icon> <Files /> </el-icon>我的博客</el-dropdown-item
          >
          <el-dropdown-item @click="logout">
            <el-icon> <Close /> </el-icon>注销</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <router-link v-else to="/login">登录</router-link>
  </div>
</template>

<style scoped lang="scss">
.login-link {
  font-size: 16px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
